<template>
  <!--  时间线 -->
  <div id="timeline" class="block">
    <div class="timeline-count">共{{ total }}条符合条件的结果</div>
    <el-scrollbar ref="scrollBarRef" class="timeline-content">
      <div class="timeline-wk" v-if="total>0">
        <div v-for="(item, index) in tableData" :key="index" class="timeline-item" @click="handleDetail(item)">
          <div class="timeline-title">
            <span class="timeline-type-time">{{ item.log_time ? item.log_time : '' }}</span>
            <span class="timeline-type-icon">{{ item.src_app_type ? item.src_app_type : '-' }}</span>
            <span class="timeline-type-icon">{{ item.behavior_type ? item.behavior_type : '-' }}</span>
          </div>
          <div class="timeline-container">
            <div v-if="item.source_app_type != '入侵防御'" class="timeline-container-list-wk hk-flex">
              <div class="timeline-container-list">
                <span>计算机名称:{{ item.hd_name ? item.hd_name : '-' }}</span>
                <span>MAC:{{ item.mac ? item.mac : '-' }}</span>
              </div>
              <div class="timeline-container-list">
                <span>责任人:{{ item.op_user ? item.op_user : '-' }}</span>
                <span>SERVICE NAME:{{ item.service_name ? item.service_name : '-' }}</span>
              </div>
              <div class="timeline-container-list">
                <span>部门:{{ item.op_dept ? item.op_dept : '-' }}</span>
                <span>审计时间:{{ item.op_time ? item.op_time : '-' }}</span>
              </div>
              <div class="timeline-container-list" style="width: 100%">
                <span>终端IP:{{ item.ip ? item.ip : '-' }}</span>
                <span>描述信息: <span style="display: inline-block" v-html="handleHightText(item.desc)" /></span>
              </div>
            </div>
            <div v-else class="timeline-container-list-wk hk-flex">
              <div class="timeline-container-list" style="width: 50%">
                <span>目的IP:{{ item.raw.dst_ip ? item.raw.dst_ip : '-' }}</span>
                <span>目的MAC:{{ item.raw.dst_mac ? item.raw.dst_mac : '-' }}</span>
              </div>
              <div class="timeline-container-list" style="width: 50%">
                <span>源IP:{{ item.raw.src_ip ? item.raw.src_ip : '-' }}</span>
                <span>源MAC:{{ item.raw.src_mac ? item.raw.src_mac : '-' }}</span>
              </div>
              <div class="timeline-container-list" style="width: 100%">
                <span>描述信息: <span style="display: inline-block" v-html="handleHightText(item.desc)" /></span>
              </div>
            </div>
            <!-- <div class="timeline-container-detail">
              <el-button type="text" @click="handleDetail(item)">详情</el-button>
            </div> -->
          </div>
        </div>
      </div>
      <div class="hk-flex empty-box" v-else>
          <div>暂无数据</div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'TimeLine',
  props: {
    searchKey: {
      type: String,
      default() {
        return null
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    total: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    tableData: {
      handler(newVal) {},
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    //  高亮查询文本
    handleHightText(text) {
      const newText = text ? text.replace(/\;*\<\/br\>/g, ';') : ''
      if (this.searchKey && text != '') {
        if (newText.includes(this.searchKey)) {
          const textArr = newText.split(this.searchKey)
          let newStr = ''
          textArr.forEach((i, index) => {
            newStr += i
            newStr += index !== textArr.length - 1 ? `<span style="color:#FF9A00;">${this.searchKey}</span>` : ''
          })
          return newStr
        } else {
          return text
        }
      } else {
        return newText || '-'
      }
    },
    handleDetail(param) {
      this.$emit('handleDetail', param)
    },
    getData() {
      this.$emit('handleScroll')
    },
    scrollToTop() {
      this.$refs.scrollBarRef.wrap.scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-box{
  height:100%;
  justify-content:center ;
  color:#909399;
}
.block {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  .el-timeline {
    flex: 1;
    overflow: auto;
  }
}
.timeline-count {
  background: #f3f5fc;
  padding: 10px 20px;
  border-bottom: 1px solid #e5e5e5;
}

.timeline-content {
  font-size: 14px;
  flex:1;
  .timeline-wk {
    .timeline-item {
      cursor: pointer;
      .timeline-title {
        display: flex;
        align-items: center;
        padding: 14px 0;

        span {
          margin-left: 20px;

          &.timeline-type-icon {
            display: flex;
            align-items: center;
            color: #4b6eef;

            &::before {
              display: block;
              content: '';
              width: 5px;
              height: 5px;
              margin-right: 10px;
              border-radius: 50%;
              background: #d8d8d8;
            }
          }
        }

        &::before {
          display: block;
          content: '';
          width: 14px;
          height: 14px;
          border-radius: 50%;
          background: #4b6eef;
          border: 2px solid #dbe2fc;
        }
      }

      .timeline-container {
        border-left: 3px solid #4b6eef;
        background: #f5f7fe;
        padding: 20px;
        margin-left: 6px;
        display: flex;
        align-items: center;
        .timeline-container-list-wk {
          width: 95%;
          flex-wrap: wrap;
          .timeline-container-list {
            width: 33%;
            span {
              font-size: 14px;
              display: block;
              line-height: 24px;
            }
          }
        }
      }
    }
  }
}

::v-deep .el-timeline-item__timestamp {
  color: #303133;
  font-size: 14px;
}
</style>
